<template>
  <view class="content">
    <image :src="gifUrl" class="img-gif"></image>
    <button @click="resetGif">重新播放</button>
  </view>
</template>

<script>
  import {
    getDiceConfig,
    getDiceStatus
  } from '@/api/mine/game.js'
  export default {
    data() {
      return {
        gifUrlList: ['../../../static/mine/game/1.gif',
          '../../../static/mine/game/2.gif',
          '../../../static/mine/game/3.gif',
          '../../../static/mine/game/4.gif',
          '../../../static/mine/game/5.gif',
          '../../../static/mine/game/6.gif'
        ],
        gifUrl: '',
        gifIndex: 0
      }
    },
    methods: {
      resetGif() {
        // 通过拼接时间戳实现重新播放效果
        this.gifUrl = this.gifUrlList[this.gifIndex] + `?${new Date().getTime()}`
        // console.log('this.gifUrl=', this.gifUrl)
      },
    },
    onLoad() {
      this.gifUrl = this.gifUrlList[this.gifIndex]
      getDiceConfig({}).then(res => {
        console.log('这是getDiceConfig的res.data==', res.data)
        const inning = res.data.record.record_id
        getDiceStatus({
          inning: inning
        }).then(res => {
          console.log('这是getDiceStatus的res.data==', res.data)
        }).catch((e) => {
          console.log('这是getDiceStatus的err==', e)
        });
      }).catch((e) => {
        console.log('这是getDiceConfig的err==', e)
      })
    }
  }
</script>

<style scoped lang="less">
  .content {
    // 	width: 500rpx;
    // 	height: 500rpx;
    // 	background-color:red;
    width: 100%;
    height: 100vh;
    position: relative;

    .img-gif {
      width: 100rpx;
      height: 100rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      // transform:translateY(-50%);
    }
  }
</style>
